import React, { useEffect, useState } from "react";
import { Input, Button, Space, Table, Image, Modal, Form, Upload, notification } from 'antd';
import { getAllSinger, songOfSingerId, listSongAdd, updateSong, delSong, updateSongUrl, updateSongPic } from '../../api';
import "./song-information.css";
import { useHistory } from 'dva'
import {
    ContainerOutlined, ExclamationCircleOutlined
} from '@ant-design/icons';
import { newDatetype } from '../../utils/newDate'

// import { useHistory } from 'dva';

export default function SongInformation() {
    const history = useHistory()
    const hsty = history.location.search.split("=")[1]
    const { Search } = Input;
    const [formUpdate] = Form.useForm();
    const [formamend] = Form.useForm();
    const { confirm } = Modal;


    const [open, setOpen] = useState(false);
    const [deletes, setDeletes] = useState([])


    // const props = {
    //     name: 'file',
    //     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    //     headers: {
    //         authorization: 'authorization-text',
    //     },
    // }

    // const history = useHistory()
    const [tableDatas, setTableDatas] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);

    useEffect(() => {
        songOfSingerIds();
    }, []);

    console.log(songOfSingerId())
    const songOfSingerIds = async () => {
        const data = await songOfSingerId()
        console.log(data)
        data.forEach(item => {
            item.key = item.id
        })
        setTableDatas(data)
    }


    const columns = [
        {
            title: '歌曲图片',
            dataIndex: 'pic',
            key: "id",
            render: (text, item) => {
                return <Image width={50} src={item.pic} />
            },
        },
        {
            title: '歌手-歌名',
            dataIndex: 'name',
            key: "id",
        },
        {
            title: '专辑',
            dataIndex: 'introduction',
            key: "id",

        },
        {
            title: '歌词',
            dataIndex: 'lyric',
            key: "id",
            render: (text, item) => (
                <div style={{ overflow: "auto" }}>{item.introduction}</div>
            ),
        },
        // {
        //     title: '资源更新',
        //     dataIndex: 'action',
        //     key: "id",
        //     render: (_, record) => (
        //         <Space size="middle">
        //             <Button>更新图片</Button>
        //         </Space>
        //     ),
        // },
        {
            title: '操作',
            dataIndex: 'action',
            key: "id",
            render: (_, record) => (
                <Space size="middle">
                    {/* <Button onClick={() => getDataDetail(record)} >编辑</Button> */}
                    <Button onClick={() => dellist('success', record.id)} danger>删除</Button>
                </Space>
            ),
        },
    ];
    // console.log(songOfSingerId())
    // const handleOk = async () => {
    //     const data = formUpdate.getFieldsValue(true);
    //     console.log(data);
    //     let listSongAdds = new URLSearchParams();
    //     listSongAdds.append('name', "G.E.M.邓紫棋-" + data.name);
    //     listSongAdds.append('introduction', data.introduction);
    //     listSongAdds.append('lyric', data.lyric);
    //     listSongAdds.append('file', "(二进制)");
    //     listSongAdds.append('singerId', 5);
    //     await listSongAdd(listSongAdds)
    //     songOfSingerIds();
    //     setIsModalOpen(false);
    // };

    // const handleCancel = () => {
    //     setIsModalOpen(false);
    // };


    // const getDataDetail = (val) => {
    //     formamend.setFieldsValue(val)
    //     setOpen(true);
    // }
    // const Ok = async () => {
    //     const arr = formamend.getFieldsValue(true)

    //     let setSingers = new URLSearchParams();
    //     setSingers.append('id', arr.id);
    //     setSingers.append('name', arr.name);
    //     setSingers.append('lyric', arr.lyric);
    //     await updateSong(setSingers);
    //     songOfSingerIds();
    //     setOpen(false);
    //     formamend.resetFields()
    // };
    // const Cancel = () => {
    //     setOpen(false);
    //     formamend.resetFields()
    // };

    const tableSelectionChange = (val) => {
        setDeletes(val)
    }
    console.log(tableSelectionChange)
    const dellist = (type, val) => {
        confirm({
            title: '确认永久删除吗',
            icon: <ExclamationCircleOutlined />,
            content: '删除后不可恢复',
            async onOk() {
                val === undefined ? await delSong(deletes) : await delSong(val)
                notification[type]({
                    message: '删除成功',
                    duration: 1,
                });
                songOfSingerIds();
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }


    const onSearch = async (value) => {
        var s = JSON.stringify(tableDatas)
        var d = JSON.parse(s)
        var html = [];
        let arrnew = d.map((item, index) => {
            return Object.assign(
                {},
                {
                    name: item.name,
                    lyric: item.lyric,
                    id: item.id,
                    pic: item.pic,
                    location: item.location,
                    introduction: item.introduction,
                }
            );
        });

        var newData = arrnew.filter((item) => {
            if (item.name.indexOf(value) > -1) {
                return item;
            }
            return newData;
        });
        // console.log(newData)

        if (newData.length > 0) {
            for (var i = 0; i < newData.length; i++) {
                html.push(newData[i])
            }
        }
        // console.log(html)
        setTableDatas(html)

    };
    return (
        <div id="information">
            <div className="songinformation"><ContainerOutlined />歌曲信息</div>
            <div className="information-box">
                <Space>
                    <Search style={{ width: 400 }} placeholder="请输入歌曲名" onSearch={onSearch} enterButton />
                    {/* <Button type="primary" onClick={() => setIsModalOpen(true)}>添加</Button> */}
                </Space>
            </div>
            <Table style={{ marginTop: "20px" }} columns={columns} dataSource={tableDatas} pagination={{}} />

            {/* <Modal title="添加歌曲" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form form={formUpdate}>
                    <Form.Item label="歌名" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item label="专辑" name="introduction">
                        <Input />
                    </Form.Item>
                    <Form.Item label="歌词" name="lyric">
                        <Input.TextArea />
                    </Form.Item>
                    <Upload {...props} name="url">
                        <Button>上传mp3文件</Button>
                    </Upload>
                </Form>
            </Modal> */}

            {/* <Modal title="修改歌曲" open={open} onOk={Ok} onCancel={Cancel} okText="确认" cancelText="取消">
                <Form form={formamend}>
                    <Form.Item label="歌名" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item label="专辑" name="introduction">
                        <Input />
                    </Form.Item>
                    <Form.Item label="歌词" name="lyric">
                        <Input.TextArea />
                    </Form.Item>
                    <Upload {...props} name="url">
                        <Button>上传mp3文件</Button>
                    </Upload>
                </Form>
            </Modal> */}
        </div>
    )
}